<template>
  <el-row>
    <el-input
      v-model="search.bbs"
      placeholder="搜索"
      class="input-with-select"
      @keyup.enter="refreshBbsList"
    >
      <template #prepend>
        <el-select
          v-model="search.bbstype"
          class="el-select"
          style="width: 140px"
        >
          <el-option label="普通搜索" value="0"></el-option>
          <el-option label="搜索帖子ID" value="1"></el-option>
          <el-option label="搜索用户ID" value="2"></el-option>
        </el-select>
      </template>
      <template #append>
        <el-button @click="refreshBbsList" icon="Search" />
      </template>
    </el-input>
  </el-row>
  <div v-loading="isLoadingData">
    <el-table :data="bbs_list" stripe style="width: 100%">
      <el-table-column prop="id" width="80" label="ID" />
      <el-table-column prop="title" label="标题" width="180" />
      <el-table-column prop="content" label="内容" width="180" />
      <el-table-column prop="uid" label="发布者ID" width="80" />
      <el-table-column prop="cate_id" label="板块ID" width="80" />
      <el-table-column prop="create_time_str" label="发布时间" width="180" />
      <el-table-column prop="stat" label="状态" width="80">
        <template #default="scope">
          <el-tag
            size="small"
            v-if="bbs_list[scope.$index].stat == 0"
            type="danger"
            >删除</el-tag
          >
          <el-tag size="small" v-if="bbs_list[scope.$index].stat == 1"
            >正常</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <el-button
            size="small"
            link
            :type="bbs_list[scope.$index].stat == 0 ? 'primary' : 'danger'"
            @click="showLockItem(scope.$index)"
          >
            {{ bbs_list[scope.$index].stat == 0 ? '解锁' : '锁定' }}
          </el-button>
          <el-button
            size="small"
            link
            type="danger"
            @click="showDelItem(scope.$index)"
          >
            删除
          </el-button>
          <el-button
            size="small"
            link
            type="primary"
            @click="$router.push(`/postlist/0/${bbs_list[scope.$index].id}`)"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-pagination
    v-model:current-page="page"
    background
    :page-size="limit"
    layout="prev, pager, next, jumper"
    :total="total"
    style="margin: 2rem 0"
  />
  <!---删除帖子-->
  <dialog-confirm
    title="提示"
    v-model:visible="dialogShow.delBbs"
    :loading="isLocking"
    @submit="delItem()"
  >
    <span>
      <span>是否删除帖子[ID:{{ activeItem.id }}]</span>
      <span style="color: #008ac5">{{ activeItem.title }}</span>
    </span>
  </dialog-confirm>
  <!--锁定帖子弹窗-->
  <dialog-confirm
    title="提示"
    v-model:visible="dialogShow.lockBbs"
    :loading="isLocking"
    @submit="lockItem(2)"
  >
    <span>
      <span v-if="activeItem.stat == 1"
        >是否锁定帖子[ID:{{ activeItem.id }}]</span
      >
      <span v-else>是否解锁帖子[ID:{{ activeItem.id }}]</span>
      <span style="color: #008ac5">{{ activeItem.title }}</span>
    </span>
  </dialog-confirm>
</template>
<script lang="ts">
import DialogConfirm from '@comps/dialogs/confirm.vue'
import Method from '@/globalmethods.ts'
import { ElMessage } from 'element-plus'
import { watch } from 'vue'
import { bbsItem, res } from '../type.ts'

export default {
  name: 'admin-bbs',
  components: { DialogConfirm },
  data() {
    return {
      page: 1,
      limit: 10,
      total: 0,
      isLoadingData: false,
      isLocking: false,
      isInjecting: false,
      isPassing: false,
      activeItem: <bbsItem>{},
      bbs_list: <bbsItem[]>[],
      search: {
        bbs: '',
        bbstype: '0',
      },
      dialogShow: {
        delBbs: false,
        lockBbs: false,
      },
    }
  },
  methods: {
    /**
     * 帖子列表刷新
     */
    refreshBbsList() {
      this.isLoadingData = true
      let payLoad = {
        search: this.search.bbs,
        search_type: this.search.bbstype,
        page: this.page,
        limit: this.limit,
      }
      Method.api_post('/admin/bbs_list', payLoad).then((response) => {
        this.isLoadingData = false
        let res = response.data
        if (res.code == 200) {
          if (this.page == 1) this.total = res.sum
          res.data.forEach((x: bbsItem) => {
            x.create_time_str = Method.formatNormalTime(x.create_time)
            x.content =
              x.content.length > 64
                ? x.content.substring(0, 64) + '...'
                : x.content
          })
          this.bbs_list = res.data
        }
      })
    },
    showLockItem(index: number) {
      this.dialogShow.lockBbs = true
      this.activeItem = this.bbs_list[index]
    },
    showDelItem(index: number) {
      this.dialogShow.delBbs = true
      this.activeItem = this.bbs_list[index]
    },
    lockItem(type: number) {
      this.isLocking = true
      let id = this.activeItem.id
      let stat = this.activeItem.stat == 1 ? 0 : 1
      Method.api_post('/admin/lock_item', {
        type: type,
        id: id,
        stat: stat,
      }).then((response) => {
        this.isLocking = false
        let res = <res>response.data
        if (res.code == 200) {
          this.activeItem.stat = res.data.stat
          this.dialogShow.lockBbs = false
          ElMessage(res.data.stat === 0 ? '锁定成功' : '解锁成功')
        }
      })
    },
    //提示删除帖子
    delItem() {
      this.isLocking = true
      Method.api_post('/admin/del_item', {
        id: this.activeItem.id,
        type: 2,
      }).then((r) => {
        this.isLocking = false
        let res = <res>r.data
        if (res.code == 200) {
          this.dialogShow.delBbs = false
          ElMessage('删除成功')
          this.refreshBbsList()
        } else ElMessage('删除失败:' + res.msg)
      })
    },
  },
  mounted() {
    this.refreshBbsList()
    watch(
      () => this.page,
      () => {
        this.refreshBbsList()
      },
    )
  },
}
</script>
